<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-header style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
      <div class="system-name">
        <el-icon style="margin-right: 8px;">
          <Monitor />
        </el-icon>
        {{ t('systemName') }}
      </div>
      <div class="toolbar">
        <el-dropdown trigger="hover">
          <div class="user_head">
            <el-avatar :size="22" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <span style="margin-left: 6px">
          {{ userName }}
            </span>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">{{ t('logout') }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside style="background-color: white" width="220px" height="100%">
        <el-scrollbar>
          <el-menu :default-active="activeMenu" :default-openeds="openedMenus">
            <el-sub-menu index="orderList">
              <template #title> {{ t('orderManage') }}</template>
              <el-menu-item index="/ordermanage/orderlist" @click="goToRoute('orderList')"
              >{{ t('orderList') }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="collectList">
              <template #title> {{ t('collectionManage') }}</template>
              <el-menu-item index="/collectmanage/collectlist" @click="goToRoute('collectList')"
              >{{ t('collectList') }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="repayschememanage">
              <template #title> {{ t('repayConfigManage') }}</template>
              <el-menu-item index="/repayschememanage/schemelist" @click="goToRoute('schemeList')"
              >{{ t('configList') }}
              </el-menu-item>
              <el-menu-item index="/repayschememanage/newscheme" @click="goToRoute('newScheme')"
              >{{ t('addConfig') }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="productmanage">
              <template #title> {{ t('productConfigManage') }}</template>
              <el-menu-item index="/productmanage/configlist" @click="goToRoute('productConfigList')"
              >{{ t('configList') }}
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="systemmanage">
              <template #title> {{ t('systemManage') }}</template>
              <el-menu-item index="/systemmanage/userlist" @click="goToRoute('userList')"
              >{{ t('userManage') }}
              </el-menu-item
              >
              <el-menu-item index="/systemmanage/rolelist" @click="goToRoute('roleList')"
              >{{ t('roleManage') }}
              </el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-divider direction="vertical" style="height: 100%" />
      <el-main style="margin-left: 20px;padding-bottom: 60px; height: 100vh">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()

const activeMenu = ref(route.path)
const openedMenus = ref<string[]>([])
const userName = ref(localStorage.getItem('userName'))

// 根据当前路由计算激活的菜单项和需要打开的菜单
const calculateMenuState = (routePath: string) => {
  activeMenu.value = routePath

  // 根据当前路由路径分割，得到需要打开的菜单数组
  const pathSegments = routePath.split('/').filter(p => p)
  if (pathSegments.length >= 2) {
    // 假设第一个路径段是主菜单的index
    openedMenus.value = [`/${pathSegments[0]}`]
  }
}

// 初始计算菜单状态
calculateMenuState(route.path)

// 监听路由变化来更新菜单状态
watch(route, (newRoute) => {
  calculateMenuState(newRoute.path)
})

const goToRoute = (routeName: string) => {
  router.push({ name: routeName })
}

const logout = () => {
  localStorage.setItem('userName', '')
  localStorage.setItem('userId', '')
  router.push({ name: 'login' })
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.user_head {
  display: flex;
  align-items: center;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.system-name {
  font-weight: bold; /* 加粗字体 */
  font-size: 16px; /* 字体大小 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  color: #333; /* 文字颜色 */
}

.el-icon {
  font-size: 20px; /* 调整图标大小 */
  vertical-align: middle; /* 垂直居中图标 */
}
</style>
